﻿@model CodeCamp2011.Models.Usuario
@{
    ViewBag.Title = "Ver";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@{
    bool esMiPerfil = ViewBag.Usuario != null ? ViewBag.Usuario.NombreUsuario == Model.NombreUsuario : false;
    bool esNene = Model.Sexo == "Hombre";
}

@Html.Partial("Nubes")

<link rel="stylesheet" href="@Url.Content("~/Content/facha.css")" type="text/css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script src="/Scripts/geolocation.js" type="text/javascript"></script>
<center>
    @Html.Partial("BoxUltimosVisitados")

    <div id="mainContent" align="center">
    @using (Html.BeginForm("Update", "Perfil", FormMethod.Post, new { id = "formUpdate" }))
    {
        if (esMiPerfil)
        {
            <div id="saveInfo"><a href="#">Guardar</a></div>
        }
        <div id="middle" class="perfil">
            @if (esMiPerfil)
            {
                <div id="editar">
                    <a href="javascript:"><span>Editar</span></a>
                </div>
            }
            <div>
                <h2 class="name">@Model.Nombre</h2>
                @Html.HiddenFor(x => x.Nombre)
            </div>

            @*<span style="float: left; margin-top: -20px; font-size: 12px;">Flores, Buenos Aires, Argentina.</span>*@

            <img id="photo" width="190" class="tieneContenido @(Model.Sexo == "Hombre" ? "nene" : "nena")" src="@(String.IsNullOrEmpty(Model.Foto) ? String.Empty : Url.Content("~/FotosUsuarios/" + Model.Foto))"></img>

            @if (esMiPerfil)
            {
                <div class="progressBar" style="background-color: Green;height: 20px;margin-bottom: 10px;margin-left: 100px;width: 0"></div>
                <input type="file" name="fotoSubida" id="fotoSubida" />
                <a href="javascript:uploadFile()">Subir Foto</a>
            }

            <div id="personal box">
                <ul>
                    <li><strong>Edad:</strong><span id="edad">@Model.Edad</span></li>
                    <li><strong>Sexo:</strong><span id="sexo">@Model.Sexo</span></li>
                    <li><strong>Email:</strong><span id="email">@Model.Email</span></li>
                    <li><strong>Lugar:</strong><span id="lugar"></span></li>
                </ul>
            </div>
            <a href="javascript:toma3d()">Te quiero ver en 3d!</a>
            <a href="javascript:quieroVerNubes()">Quiero ver Nubes!</a>
            
            <h3 class="perfilSubtitle">Info</h3>

            <div class="contentBox">
                <h4>Sobre Mi</h4>
                <div id="bio" name="SobreMi" class="box tieneContenido">@Model.SobreMi</div>
            </div>
            <h3 class="perfilSubtitle">Gustos</h3>
            <div class="contentBox">
                <h4>Musica</h4>
                <div id="music" name="Musica" class="box tieneContenido">@Model.Musica</div>
            </div>
            <div class="contentBox">
                <h4>Peliculas</h4>
                <div id="films" name="Peliculas" class="box tieneContenido">@Model.Peliculas</div>
            </div>
            <div class="contentBox">
                <h4>Libros</h4>
                <div id="books" name="Libros" class="box tieneContenido">@Model.Libros</div>
            </div>
        <div>
    </div>
</div>
<div id="rightColumn" class="column"></div>
    }
    </div>
</center>
<script type="text/javascript">
    var esMiPerfil = @(esMiPerfil.ToString().ToLower());
    var esNene = @(esNene.ToString().ToLower());

    $(document).ready(function () {
        $('.box').addClass(esNene ? 'nene' : 'nena');    

        /* Local Storage Perfil Visitado */
        if (!esMiPerfil)
            guardarVisitaEnLocalStorage();

        /* Setear Campos ContentEditable */
        $('#editar').click(function () {
            $('.tieneContenido').attr('contenteditable', 'true');
        });

        /* Setear valor de ContentEditable en hidden */
        $('[contenteditable]').live('blur', function () {
            var value = $(this).html();
            $(this).parent().find('input[type=hidden]').val(value);
        });

        /* Guardar Info */
        $('#saveInfo').click(function() {
            $.post($('#formUpdate').attr('action'), $('#formUpdate').serialize(), function(result) {
                console.log(result);
            }, 'json');
        });
    });

    function quieroVerNubes() {
        $('.cloudContainer').show();
    }

    function toma3d() {
        $('span, div, input').addClass('texto3d').css('color', 'black');
        $('.tieneContenido').addClass('box3d');
    }

    function guardarVisitaEnLocalStorage() {
        var usuarioVista = "@Model.NombreUsuario";
        
        if ('@ViewBag.UsuarioActual' != '')
            key = '@ViewBag.UsuarioActual';
        else
            key = "anonimo";

        var valorStorage = localStorage.getItem(key + "_UltimosUsuariosVisitados");

        if(valorStorage == null)
            valorStorage = '';

        if(!yaEstaEnStorage(valorStorage, usuarioVista))
            localStorage.setItem(key + "_UltimosUsuariosVisitados", valorStorage + '{nombreUsuario: "' + usuarioVista + '", edad: @Model.Edad, foto: "@Model.Foto"};');
    }

    function yaEstaEnStorage(valorStorage, usuarioVista) {
        var usuariosVisitados = valorStorage.split(';');

        for (var i = 0; i < usuariosVisitados.length - 1; i++) {
            var nombreUsuarioVisitado = eval( '(' + usuariosVisitados[i] + ')' ).nombreUsuario;

            if(nombreUsuarioVisitado == usuarioVista)
                return true;
        }

        return false;
    }

    /* UPLOADER */
    
    var progressBarMaxWidth = 200;
    var totalFileSize = 0;

    function uploadFile() {
        var xhr = new XMLHttpRequest();
        var fd = new FormData(document.getElementById('formUpdate'));
        var file = document.getElementById('fotoSubida').files[0];
        totalFileSize = file.size;

        // nos suscribimos a los eventos
        xhr.upload.addEventListener("progress", uploadProgress, false);
        xhr.addEventListener("load", uploadComplete, false);

        // abrimos la conexión con el servidor
        xhr.open("POST", "@Url.Action("SubirFoto")");
        xhr.send(fd);
    }

    function uploadProgress(evt) {
        if (evt.lengthComputable) {
            var porcentaje = Math.round(evt.loaded / totalFileSize);
            $('.progressBar').css('width', progressBarMaxWidth * porcentaje);
        }
    }

    // función que se ejecuta cuando se completó la transferencia
    function uploadComplete(evt) {
        var response = eval( '(' + evt.target.responseText + ')');
        totalFileSize = 0;

        if(response.Ok)
            $('#photo').attr('src', '@Url.Content("~/FotosUsuarios/")' + response.FotoUsuario);
    }

</script>
